<template>
  <div>
    <div class="header">出库申请</div>
    <el-form :model="cuForm" ref="cuForm" v-loading="formLoading" :rules="rules"
             :disabled="cuForm.flow_status ==3||cuForm.flow_status ==4"
    >
      <div class="title">申请人： {{ userName }}</div>
      <table class="mailTable">
        <tr class="firstTr">
          <td class="column firstTd">
            <span class="tip">*</span>供应商
          </td>
          <td class="column" colspan="2">
            <el-form-item prop="supplier_id">
              <el-select v-model="cuForm.supplier_id" clearable placeholder="请选择供应商" style="width: 100%">
                <el-option label="管理员" value="1"></el-option>
              </el-select>
            </el-form-item>
          </td>
          <td class="column">
            <span class="tip">*</span>物品
          </td>
          <td class="column" colspan="2">
            <el-form-item prop="supplier_goods_id">
              <el-select v-model="cuForm.supplier_goods_id" clearable placeholder="请选择物品" style="width: 100%">
                <el-option label="管理员" value="1"></el-option>
              </el-select>
            </el-form-item>
          </td>
<!--          <td class="column">-->
<!--            时间-->
<!--          </td>-->
<!--          <td class="column">-->
<!--            <el-form-item prop="submit_at">-->
<!--              <el-date-picker v-model="cuForm.submit_at" type="date" placeholder="请选择生产日期"-->
<!--                              format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd" style="width: 100%"-->
<!--              >-->
<!--              </el-date-picker>-->
<!--            </el-form-item>-->
<!--          </td>-->
        </tr>
        <tr class="firstTr">
          <td class="column firstTd">
            <span class="tip">*</span>单价
          </td>
          <td class="column">
            <el-form-item prop="price">
              {{ cuForm.price ? cuForm.price : '请先选择物品' }}
            </el-form-item>
          </td>
          <td class="column">
            <span class="tip">*</span>数量
          </td>
          <td class="column">
            <el-form-item prop="number">
              <el-input v-model.trim="cuForm.number" placeholder="请输入数量"></el-input>
            </el-form-item>
          </td>
          <td class="column">
            <span class="tip">*</span>总价
          </td>
          <td class="column">
            <el-form-item prop="total_price">
              {{ cuForm.total_price ? cuForm.total_price : '请选择物品后输入数量' }}
            </el-form-item>
          </td>
        </tr>
        <tr class="firstTr">
          <td class="column firstTd title" colspan="2">
            <span class="tip">*</span>事由
          </td>
          <td colspan="4">
            <el-form-item prop="reason" style="margin: 10px 0">
              <el-input clearable type="textarea" v-model.trim="cuForm.reason" :rows="4" show-word-limit
                        placeholder="请输入事由"
              ></el-input>
            </el-form-item>
          </td>
        </tr>
      </table>
    </el-form>
    <FlowBtnRow :form-name="'cuForm'" :is-new-data="is_created" :can-check="cuForm.can_check"
                :is-applyer="cuForm.flow_applyer_id == userId" :flow-status="cuForm.flow_status"
                @save="save" @submit="submit" @pass="pass" @returnBack="returnBack" @delete="remove"
                @actualDelete="actualDelete"
    ></FlowBtnRow>
  </div>
</template>

<script>
import FlowBtnRow from '@/components/FlowBtnRow'
import {
  actualDeleteData,
  deleteData, getDetail,
  pass,
  returnBack,
  save,
  saveAndBegin
} from '@/api/reimbursement/ordinary/ordinary'

export default {
  name: 'goods_out_info',
  components: {
    FlowBtnRow
  },
  data() {
    return {
      cuForm: {
        supplier_id: null,
        supplier_goods_id: null,
        number: null,
        price: null,
        total_price: null,
        reason: null,
        submit_at: null
      },
      is_created: false,
      rules: {
        amount: [
          { required: true, message: '请输入金额', trigger: 'blur' }
        ],
        reason: [
          { required: true, message: '请输入事由', trigger: 'blur' }
        ]
      },
      formLoading: false
    }
  },
  computed: {
    userName() {
      return this.cuForm.real_name ? this.cuForm.real_name : this.$store.state.user.name
    },
    userId() {
      return this.$store.state.user.id
    }
  },
  methods: {
    save() {
      const loading = this.$loading({
        lock: true,
        text: '提交中',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      save(this.cuForm).then(
        res => {
          if (res.code == 200) {
            this.$message({
              message: res.message,
              type: 'success'
            })
            this.closeThisPage()
          } else {
            this.$message.error('操作失败')
          }
          loading.close()
        }
      ).catch(() => {
        loading.close()
      })
    },
    submit() {
      const loading = this.$loading({
        lock: true,
        text: '提交中',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      saveAndBegin(this.cuForm).then(
        res => {
          if (res.code == 200) {
            this.$message({
              message: res.message,
              type: 'success'
            })
            this.closeThisPage()
          } else {
            this.$message.error('操作失败')
          }
          loading.close()
        }
      ).catch(() => {
        loading.close()
      })
    },
    pass(option) {
      const loading = this.$loading({
        lock: true,
        text: '提交中',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      pass({
        id: this.cuForm.id,
        wf_check_opinion: option
      }).then(
        res => {
          if (res.code == 200) {
            this.$message({
              message: res.message,
              type: 'success'
            })
            this.closeThisPage()
          } else {
            this.$message.error('操作失败')
          }
          loading.close()
        }
      ).catch(() => {
        loading.close()
      })
    },
    returnBack(option) {
      const loading = this.$loading({
        lock: true,
        text: '提交中',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      returnBack({
        id: this.cuForm.id,
        wf_check_opinion: option
      }).then(
        res => {
          if (res.code == 200) {
            this.$message({
              message: res.message,
              type: 'success'
            })
            this.closeThisPage()
          } else {
            this.$message.error('操作失败')
          }
          loading.close()
        }
      ).catch(() => {
        loading.close()
      })
    },
    remove() {
      const loading = this.$loading({
        lock: true,
        text: '提交中',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      deleteData(this.cuForm.id).then(
        res => {
          if (res.code == 200) {
            this.$message({
              message: res.message,
              type: 'success'
            })
            this.closeThisPage()
          } else {
            this.$message.error('操作失败')
          }
          loading.close()
        }
      ).catch(() => {
        loading.close()
      })
    },
    actualDelete() {
      const loading = this.$loading({
        lock: true,
        text: '提交中',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      actualDeleteData(this.cuForm.id).then(
        res => {
          if (res.code == 200) {
            this.$message({
              message: res.message,
              type: 'success'
            })
            this.closeThisPage()
          } else {
            this.$message.error('操作失败')
          }
          loading.close()
        }
      ).catch(() => {
        loading.close()
      })
    },
    getDetail(id) {
      this.formLoading = true
      getDetail({ id: id }).then(
        res => {
          this.formLoading = false
          this.cuForm = res.data
          console.log(this.cuForm)
        }
      )
    },
    closeThisPage() {
      this.$store.dispatch('tagsView/closeCurPage')
    }
  }
}
</script>

<style scoped>
.mailTable {
  width: 60%;
  font-size: 14px;
  margin: 0 auto 10px auto;
  border-collapse: collapse;
}

.mailTable tr td {
  width: 400px;
  height: 60px;
  line-height: 35px;
  box-sizing: border-box;
  padding: 0 10px;
  border-bottom: 1px solid #E6EAEE;
  border-right: 1px solid #E6EAEE;
}

.firstTr td {
  border-top: 1px solid #E6EAEE;
}

.firstTd {
  border-left: 1px solid #E6EAEE;
}

.mailTable tr td.column {
  text-align: center;
  /*border: 1px solid #8c939d;*/
}

.tip {
  color: red;
}

.header {
  padding-top: 20px;
  text-align: center;
  font-size: 25px;
  font-weight: bold;
  margin: 10px auto;
}

.title {
  width: 60%;
  padding-left: 10px;
  margin: 5px auto;
}

/deep/ .el-form-item {
  margin-bottom: 0;
}

/deep/ .el-textarea.is-disabled .el-textarea__inner {
  background-color: white;
  color: black;
}

/deep/ .el-input.is-disabled .el-input__inner {
  background-color: white;
  color: black;
}
</style>
